import React, { Component } from 'react'
import classNames from 'classnames'
import '../index.css'

export default class Comment extends Component {
  state = {
    // 当前用户
    user: {
      name: '清风徐来',
      vip: true,
      avatar: 'https://static.youku.com/lvip/img/avatar/310/6.png',
    },
    // 评论列表
    comments: [
      {
        id: 100,
        name: '__RichMan',
        avatar: 'https://r1.ykimg.com/051000005BB36AF28B6EE4050F0E3BA6',
        content:
          '这阵容我喜欢😍靳东&闫妮，就这俩名字，我就知道是良心剧集...锁了🔒',
        time: '2021/10/12 10:10:23',
        vip: true,
      },
      {
        id: 101,
        name: '糖蜜甜筒颖',
        avatar:
          'https://image.9xsecndns.cn/image/uicon/712b2bbec5b58d6066aff202c9402abc3370674052733b.jpg',
        content:
          '突围神仙阵容 人民的名义第三部来了 靳东陈晓闫妮秦岚等众多优秀演员实力派 守护人民的财产 再现国家企业发展历程',
        time: '2021/09/23 15:12:44',
        vip: false,
      },
      {
        id: 102,
        name: '大星的妈妈',
        avatar: 'https://static.youku.com/lvip/img/avatar/310/6.png',
        content:
          '第一集看的有点费力，投入不了，闫妮不太适合啊，职场的人哪有那么多表情，一点职场的感觉都没有',
        time: '2021/07/01 00:30:51',
        vip: true,
      },
    ],
  }

  render() {
    return (
      <div className="comments">
        <h3 className="comm-head">
          热门评论<sub>({this.state.comments.length})</sub>
        </h3>
        <ul className="comm-list">
          {this.state.comments.map((item) => (
            <li key={item.id} className="comm-item">
              <img className="avatar" src={item.avatar} alt="" />
              <div className="info">
                <p className={classNames('name', { vip: item.vip })}>
                  {item.name}
                  {item.vip && (
                    <img src="https://gw.alicdn.com/tfs/TB1c5JFbGSs3KVjSZPiXXcsiVXa-48-48.png" />
                  )}
                  {item.vip || ''}
                </p>
                <p className="time">{item.time}</p>
                <p>{item.content}</p>
              </div>
            </li>
          ))}
        </ul>
      </div>
    )
  }
}
